<template>
  <div>
    <h2>侦听器的选项</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uname: 'zhangsan',
      cat: {
        name: '小花',
        age: 3
      }
    }
  },
  watch: {
    // 1. 如果除了基本的侦听以外，如果还要加其他选项，只能写成对象格式
    uname: {
      handler (val) {
        console.log(val)
      },
      immediate: true // 立即侦听，打开页面后，马上执行一次侦听器函数
    },
    // 2. 只侦听对象的某个属性
    'cat.age' (val) {
      console.log(val)
    },
    // 3. 侦听对象的所有属性的变化，必须写成对象格式
    cat: {
      handler (val) {
        console.log(val)
      },
      deep: true // deep是深的意思。加入它，当对象的任何属性改变的时候，就可以侦听到了
      // deep针对的就是对象属性的变化。如果侦听数组的变化，不需要加deep，当然加上也不会错
    }
  }
}
</script>

<style></style>
